<template>
  <div>
    <div style="padding:0px 5px; margin-bottom: 70px">
      <div class="van-cell-group van-hairline--top-bottom">
        <h4 style="color:black">发表评论</h4>
        <hr />
        <div class="van-cell van-field">
          <div class="van-cell__value van-cell__value--alone">
            <div class="van-field__body">
              <textarea
                placeholder="请输入留言"
                row="1"
                class="van-field__control"
                style="height: 24px;"
                v-model="value"
              ></textarea>
            </div>
          </div>
        </div>
      </div>
      <button
        class="van-button van-button--info van-button--normal"
        @click="toast"
        style="margin-bottom:10px"
      >
        <span class="van-button__text">发表评论</span>
      </button>
      <div class="van-list" v-for="(item,index) in commentList" :key="index">
        <div class="title">
          <span>第{{index+1}}楼</span>
          <span>用户：{{item.user_name}}</span>
          <span>发表时间{{item.add_time}}</span>
        </div>
        <div class="body">{{item.content}}</div>
      </div>

      <button
        class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"
        @click="getGdList"
      >
        <span class="van-button__text">加载更多</span>
      </button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data () {
    return {
      value: '',
      commentPageNum: 1,
      commentList: []
    }
  },
  created () {
    this.commentList = this.comList
    console.log(this.commentList)
  },
  methods: {
    async getGdList () {
      this.commentPageNum += 1
      const res = await this.$http.get(
        '/api/getcomments/' +
          this.photoListId +
          '?pageindex=' +
          this.commentPageNum
      )
      res.data.message.forEach(element => {
        this.commentList.push(element)
      })
    },
    async getcommentList () {
      const res = await this.$http.get('/api/getcomments/' + this.photoListId + '?pageindex=1')
      this.commentList = res.data.message
    },
    async toast () {
      if (this.value === '') {
        Toast('留言不能为空')
      } else {
        const res = await this.$http.post(
          '/api/postcomment/' + this.photoListId,
          `content=${this.value}`
        )
        this.getcommentList()
        this.value = ''
        console.log(res)
      }
    }
  },
  computed: {
    ...mapState(['comList', 'photoListId'])
  }
}
</script>

<style lang="less" scoped>
.van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 15px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
.van-cell-group {
  background-color: #fff;
}
.van-cell__value--alone {
  color: #323233;
  text-align: left;
}
.van-cell__value--alone {
  color: #323233;
  text-align: left;
}
.van-field {
    height: 100px;
    border: 1px solid #ccc;
}
.van-field__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #323233;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none;
}
.van-button {
  width: 100%;
  margin: 5px 0;
}
.van-button--normal {
  padding: 0 15px;
  font-size: 14px;
}
.van-button--info {
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.van-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 44px;
  margin: 5px 0;
  padding: 0;
  font-size: 16px;
  line-height: 42px;
  text-align: center;
  border-radius: 2px;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
}
button,
input,
textarea {
  color: inherit;
  font: inherit;
}
input {
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: buttontext;
  background-color: buttonface;
  box-sizing: border-box;
  padding: 2px 6px 3px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}

input,
textarea,
select,
button {
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  margin: 0em;
  font: 400 13.3333px Arial;
}

button {
  -webkit-appearance: button;
}
.van-button:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #000;
  border: inherit;
  border-color: #000;
  border-radius: inherit;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  content: " ";
}

.van-button--hairline:after {
  border-color: inherit;
  border-radius: 4px;
}
.van-hairline--surround:after {
  border-width: 1px;
}
.title {
  height: 30px;
  background-color: #ccc;
  font-size: 12px;
  line-height: 30px;
}
.title span {
  margin-right: 6px;
}
.body {
  line-height: 35px;
  text-indent: 2em;
  font-size: 12px;
}
</style>
